.message { @include text-common; position: relative; }
.message {
	* { user-select: text !important; }

	.label.small { display: inline-block; @include text-small; color: var(--color-text-secondary); }
	.label.small.withText { margin: 0px 0px 0px 4px; }

	> .flex { display: flex; flex-direction: row; gap: 0px 8px; align-items: stretch; }
	> .flex {
		> .side.left { flex-shrink: 0; width: 32px; display: flex; align-items: flex-end; }
		> .side.left {
			.iconObject { display: none; }
		}
		> .side.right { display: flex; flex-direction: column; position: relative; align-items: flex-start; flex-grow: 1; }
	}

	.bubbleOuter { display: flex; flex-direction: column; width: 100%; }

	.bubbleInner { display: flex; flex-direction: row; gap: 0px 8px; align-items: center; }
	.bubbleInner {
		> .controls { 
			flex-shrink: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0px 8px; 
			opacity: 0; transition: opacity $transitionCommon; min-width: 76px;
		}
		> .controls {
			.icon { width: 20px; height: 20px; }
			.icon.messageReply { background-image: url('~img/icon/chat/buttons/reply0.svg'); }
			.icon.messageReply:hover, .icon.messageReply.hover { background-image: url('~img/icon/chat/buttons/reply1.svg'); }

			.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); }
			.icon.more:hover, .icon.more.hover { background-image: url('~img/icon/menu/action/more1.svg'); }
		}

		.textWrapper { max-width: 480px; }
	}

	.icon.status { width: 12px; height: 12px; }
	.icon.status.syncing { background-image: url('~img/icon/chat/messageStatus/syncing.svg'); }
	.icon.status.error { background-image: url('~img/icon/chat/messageStatus/error.svg'); }

	.bubble { 
		border-radius: 16px; background-color: var(--color-shape-tertiary); display: flex; flex-direction: column;
		transition: background-color $easeInQuint 0.2s; 
	}
	.bubble {
		.textWrapper { line-height: 20px; padding: 6px 12px; }
		.text { user-select: text !important; display: inline; }
		.time { 
			@include text-very-small; line-height: 14px; letter-spacing: -0.07px; color: var(--color-text-secondary); float: right; padding-left: 8px; padding-top: 4px; 
			display: flex; align-items: center; gap: 0px 4px;
		}

		.attachments { padding: 4px; }
	}

	.icon.reactionAdd { width: 28px; height: 28px; background: url('~img/icon/chat/buttons/reaction0.svg') 50% 50% no-repeat; background-size: 20px; border-radius: 50%; }
	.icon.reactionAdd:hover, .icon.reactionAdd.hover { background-image: url('~img/icon/chat/buttons/reaction2.svg'); }

	.reply { margin: 0px 0px 4px 0px; position: relative; overflow: hidden; opacity: 0.5; max-width: 360px; cursor: default; }
	.reply {
		.bubble { 
			display: flex; flex-direction: row; align-items: center; gap: 0px 6px; padding: 8px 12px; border-radius: 16px; margin-left: 8px; 
			position: relative;
		}
		.bubble::before {
			content: ''; position: absolute; left: -8px; top: 0px; width: 4px; height: 100%; background-color: var(--color-shape-primary);
			border-radius: 4px;
		}

		> .icon, > .iconObject { flex-shrink: 0; width: 32px; height: 32px; }
		> .iconObject:not(.noBg, .isParticipant) { border-radius: 4px !important; background-color: var(--color-shape-highlight-medium) !important; }

		.icon.isMultiple { background-image: url('~img/icon/chat/attachment/multiple.svg'); }

		.textWrapper { padding: 0px; width: 100%; @include text-small; display: flex; flex-direction: column; overflow: hidden; }
		.name { @include text-small; font-weight: 500; padding-left: 12px; }
		.text { @include clamp3; }
	}
	.reply.withAttachment {
		.text { @include clamp1; }
	}

	.attachments {
		.attachment {
			.icon.remove { display: none; }
		}
	}

	.author { display: none; align-items: center; gap: 0px 8px; margin-bottom: 4px; padding-left: 12px; }
	.author {
		.name { @include text-small; @include text-overflow-nw; font-weight: 500; }
	}
	.author * { user-select: text !important; }

	.expand { display: none; align-items: center; color: var(--color-text-secondary); margin-top: 4px; white-space: nowrap; cursor: default; }

	.sub { @include text-small; color: var(--color-text-secondary); display: none; }
	.sub {
		.item:hover { color: var(--color-text-primary); }
	}

	.reactions { padding: 4px 0px 0px 0px; display: flex; flex-wrap: wrap; flex-direction: row; gap: 8px; align-items: center; }
	.reactions {
		.reaction { 
			display: flex; flex-direction: row; border-radius: 14px; gap: 0px 4px; align-items: center; @include text-small; font-weight: 500; 
			background-color: var(--color-shape-highlight-medium); padding: 5px 6px; flex-shrink: 0;
		}
		.reaction {
			&:hover { background-color: var(--color-shape-highlight-dark); }
			&.isMulti { gap: 0px 2px; }
			&.isMe { background-color: var(--color-bg-tag-lime); }

			.count { min-width: 18px; text-align: center; }
		}
		.reactionAdd { background-color: var(--color-shape-highlight-medium); background-image: url('~img/icon/chat/buttons/reaction1.svg'); }
	}

	.newMessages { display: none; justify-content: center; position: absolute; top: -9px; left: 0px;  width: 100%; }
	.newMessages {
		.label { @include text-small; padding: 0px 12px; font-weight: 500; background: var(--color-bg-primary); color: var(--color-text-secondary); }
	}

	&.isSelf {
		> .flex { flex-direction: row-reverse; }
		> .flex {
			> .side.left { display: none; }
			> .side.right { align-items: flex-end; }
		}

		.bubbleOuter { align-items: flex-end; }

		.bubbleInner { flex-direction: row-reverse; }
		.bubbleInner {
			> .controls { flex-direction: row-reverse; }
			.bubble { background-color: var(--color-bg-tag-lime); }
		}

		.reactions { justify-content: flex-end; }
	}

	&.withAttachment {
		.bubbleInner {
			.bubble {
				.textWrapper { padding: 8px 12px 0px; }
			}
		}
	}

	&.withAttachment.withMedia {
		.bubbleInner {
			.bubble { flex-direction: column-reverse; }
			.bubble {
				.textWrapper { padding: 0px 12px 8px; max-width: 532px; }
			}
		}
	}

	&.canExpand {
		.bubbleInner {
			.expand { display: flex; }
			.text { @include clamp; -webkit-line-clamp: 16; }
		}
	}

	&.canExpand.isExpanded {
		.bubbleInner {
			.text { -webkit-line-clamp: unset; }
		}
	}

	&:hover, &.hover {
		.controls { opacity: 1; }
	}

	&:first-child { margin-top: 0px; }

	&.isFirst { margin: 12px 0px 0px 0px; }
	&.isFirst {
		.author { display: flex; }
	}

	&:not(.withText) {
		.bubbleInner {
			.bubble {
				.textWrapper { display: none; }
			}
		}
	}

	&.isLast { margin: 0px 0px 12px 0px; }
	&.isLast {
		> .flex > .side.left {
			.iconObject { display: block; }
		}
	}

	&:not(.isLast) {
		.reactions { padding-bottom: 8px; }
	}

	&.isNew { position: relative; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--color-shape-tertiary); }
	&.isNew {
		.newMessages { display: flex; }
	}

	&.highlight {
		.bubbleInner {
			.bubble { background-color: var(--color-bg-ice) !important;}
		}
	}

	&.attachmentsLayout1 {
		.bubble { max-width: 360px; }
	}

	&.withText {
		.attachments.isSingle {
			.attachment.isImage.withBlur {
				.imgWrapper { width: 352px; }
			}
		}
	}
}
